<template>
  <!-- 我的勋章 -->
  <div class="medalDetails">
    <MyHead title="勋章详情"></MyHead>
    <div>
      <div class="title flexc">{{ act_title }}</div>
      <div class="img-box">
        <img v-if="this.medal_image" :src="sourceURL + medal_image" alt="" width="100%" />
        <van-image width="80%" v-else>
            <template v-slot:error></template>
          </van-image>
      </div>
      <div v-if="this.createtime_text" class="flexc">
        获得时间：{{ createtime_text }}
      </div>
    </div>
    <MyTab></MyTab>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      openid: $.cookie("openid"),
      act_title: "", //活动名称
      medal_image: "", //勋章图片
      createtime_text: "", //获得时间
    };
  },
  computed: {},
  methods: {},
  mounted() {
    this.act_title = this.$route.query.act_title;
    this.medal_image = this.$route.query.medal_image;
    this.createtime_text = this.$route.query.createtime_text;
  },
};
</script>
  
<style lang="scss" scoped>
// 居中（上下左右居中）
.medalDetails {
  width: 100%;
  min-height: 100vh;
  height: 100%;
  background-color: #f9f9f9;
  font-size: 18px;
.title{
    font-size: 25px;
}
  .img-box {
    max-width: 100%;
    // height: 100px;
    min-height: 200px;
    box-sizing: content-box;
    display: flex;
    justify-content: center;
    align-content: center;
    overflow: hidden;
    /* 隐藏超出容器的部分 */
    position: relative;
    margin-bottom: 10px;
    margin-top: 20px;
    img {
          width: 80%;
          min-height: 200px;
          background: red;
        }
  }
}
</style>